<style type="text/css">
    /*数据为空时状态*/
    .blank_block{margin-bottom:0;}
    .blank_tit{font-size:14px;color:#5a6378;margin-left:10px;vertical-align:middle;}
</style>
<div class="resource_management" style="background:#fff;padding:20px 40px 40px;">
    <div class="loader" ng-show="!persistents">
        <div class="loader-inner ball-clip-rotate-multiple">
            <div></div>
            <div></div>
        </div>
    </div>
    <div ng-show="persistents">
        <uib-tabset class="tab-default tab-back-zn-default " active="check">
            <uib-tab index="1" >
                <uib-tab-heading style="width:180px">
                    <i class="constantlyvolume"></i>&nbsp;&nbsp;持久化卷
                </uib-tab-heading>
                <div>
                    <div class="row" style="margin-left:-15px;margin-top:20px;">
                        <div class="col-sm-7 col-xs-4">
                            <a class="btn btn-green" style="margin-right: 20px; "
                               ui-sref="console.create_constantly_volume">
                                <i class="fa fa-plus fa-lg"></i>
                                <span class="hidden-xs">新建持久化卷</span>
                            </a>
                            <a class="btn btn-skyblue" ng-click="constantlyvolume()" style="height: 34px; width: 36px; padding: 5px 5px;">
                                <i class="fa fa-refresh fa-lg"ng-class="{'fa-spin': grid.constantlyvolume}"></i>
                            </a>
                        </div>
                        <div class="col-sm-5 col-xs-8" style="padding-left: 0;">
                            <div class="pull-right">
                                <div class="searchbar">
                                    <div class="input-group">
                                        <input type="text" class="form-control"
                                               ng-model="grid.rmtxt"
                                               ng-keyup="rmsearch($event)"
                                               placeholder="搜索关键字" style="height: 34px;">
                                            <span class="input-group-btn">
                                                <a class="btn" ng-click="rmsearch('search')"></a>
                                            </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive" style="margin-top: 30px">
                        <table class="table-hover table-default" style="table-layout:fixed; width: 100%; border-bottom: none;">
                            <tr style="border-bottom: 1px solid #CCCCCC;">
                                <div class="row">
                                    <th class='col-lg-2 col-md-2 col-sm-1'>持久化卷名称</th>
                                    <th class='col-lg-2 col-md-2 col-sm-1'>持久化卷状态</th>
                                    <th class='col-lg-2 col-md-2 col-sm-2'>创建时间</th>
                                    <th class='col-lg-2 col-md-2 col-sm-2'>持久化卷大小</th>
                                    <th class='col-lg-3 col-md-3 col-sm-2'>挂载服务数量</th>
                                </div>
                            </tr>
                            <tr ng-repeat="item in persistents">
                                <td style="border-bottom: 1px solid #CCCCCC;color:#4960e6;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden;"><a class="listitem" uib-tooltip="{{item.metadata.name}}" tooltip-placement="top" ui-sref="console.constantly_detail({name:item.metadata.name})">{{item.metadata.name}}</a>
                                </td>
                                <td style="border-bottom: 1px solid #CCCCCC;"> <span class="icon12 icon12-{{item.status.phase}}"
                                                                                     ng-class="{'fa-spin':item.status.phase == 'Pending','fa-unspin':item.status.phase == 'Bound'}"></span>
                                    {{item.status.phase | bandFilter}}
                                </td>
                                <td style="border-bottom: 1px solid #CCCCCC;">{{item.metadata.creationTimestamp |
                                    dateRelative}}
                                </td>
                                <td style="border-bottom: 1px solid #CCCCCC;">{{item.spec.resources.requests.storage}}</td>
                                <td style="border-bottom: 1px solid #CCCCCC;">{{item.arr.length}}</td>

                            </tr>
                            <tr>

                                <td colspan="5" style="text-align: center;background: #fff;border-bottom: 1px solid #CCCCCC;" ng-if="persistents.length===0"><p class="blank_block">  <span class="blank_tit"> {{text}}</span></p></td>

                            </tr>
                        </table>
                    </div>
                </div>

                <div class="text-center" ng-if="grid.rmtotal > 10" style="margin-top: 30px;">
                    <uib-pagination class="pagination pagination-sm" ng-model="grid.rmpage" total-items="grid.rmtotal"
                                    items-per-page="grid.size" boundary-links="false" max-size="12" rotate="true"
                                    previous-text="<"
                                    next-text=">"
                                   >
                    </uib-pagination>

                </div>
            </uib-tab>
            <uib-tab index="2">
                <uib-tab-heading style="width:180px">
                    <i class="configvolume"></i>&nbsp;&nbsp;配置卷
                </uib-tab-heading>
                <div>
                    <div class="row" style="margin-left:-15px;margin-top:20px;">
                        <div class="col-sm-7 col-xs-4">
                            <a class="btn btn-green" style="margin-right: 20px" ui-sref="console.create_config_volume">
                                <i class="fa fa-plus fa-lg"></i>
                                <span class="hidden-xs"> 新建配置卷</span>
                            </a>
                            <a class="btn btn-skyblue" ng-click="newreload()"
                               style="height: 34px; width: 36px; padding: 5px 5px;">
                                <i class="fa fa-refresh fa-lg"></i>
                            </a>
                        </div>
                        <div class="col-sm-5 col-xs-8" style="padding-left: 0;">
                            <div class="pull-right">
                                <!----------------------------------------->
                                <div class="searchbar">
                                    <div class="input-group">
                                        <input type="text" class="form-control"
                                               ng-model="grid.txt"
                                               ng-keyup="search($event)"
                                               placeholder="搜索关键字"  style="height: 34px;">
                                            <span class="input-group-btn">
                                                <a class="btn" ng-click="search('search')"></a>
                                            </span>
                                    </div>
                                </div>

                                <!----------------------------------------->
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive" style="margin-top: 30px">
                        <table class="table-hover table-default"
                               style="table-layout:fixed; width: 100%; border-bottom: none;">
                            <tr>
                                <div class="row">
                                    <th class='col-lg-2 col-md-2 col-sm-1'>配置卷名称</th>
                                    <th class='col-lg-2 col-md-2 col-sm-2'>创建时间</th>
                                </div>
                            </tr>
                            <tr ng-repeat="items in configitems">
                                <td style="border-bottom: 1px solid #CCCCCC;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden;">

                                    <a ui-sref="console.config_detail({name: items.metadata.name})" uib-tooltip="{{items.metadata.name}}" tooltip-placement="top" style="color:#4960e6">{{items.metadata.name}}</a>
                                </td>
                                <td style="border-bottom: 1px solid #CCCCCC;"><span
                                        uib-tooltip="{{items.metadata.creationTimestamp  | timescon}}">{{items.metadata.creationTimestamp | dateRelative}} </span>
                                </td>
                            </tr>
                            <tr>

                                 <td colspan="2" style="text-align: center;background: #fff;border-bottom: 1px solid #CCCCCC;"  ng-if="!configitems.length"><p class="blank_block">  <span class="blank_tit"> {{text2}}</span></p></td>

                            </tr>
                        </table>
                    </div>
                </div>

                <div class="text-center" ng-if="grid.total > 10" style="margin-top: 30px;">
                    <uib-pagination class="pagination pagination-sm" ng-model="grid.page" total-items="grid.total"
                                    items-per-page="grid.size" boundary-links="false" max-size="12" rotate="true"
                                    previous-text="<"
                                    next-text=">"
                                    >
                    </uib-pagination>

                </div>
            </uib-tab>
            <uib-tab index="3">
                <uib-tab-heading style="width:180px">
                    <i class="secret"></i>&nbsp;&nbsp;密钥
                </uib-tab-heading>
                <div>
                    <div class="row" style="margin-left:-15px;margin-top:20px;">
                        <div class="col-sm-7 col-xs-4">
                            <a class="btn btn-green" style="margin-right: 20px" ui-sref="console.create_secret">
                                <i class="fa fa-plus fa-lg"></i>
                                <span class="hidden-xs"> 新建密钥</span>
                            </a>
                            <a class="btn btn-skyblue" ng-click="secretReload()"
                               style="height: 34px; width: 36px; padding: 5px 5px;">
                                <i class="fa fa-refresh fa-lg"></i>
                            </a>
                        </div>
                        <div class="col-sm-5 col-xs-8" style="padding-left: 0;">
                            <div class="pull-right">
                                <div class="searchbar">
                                    <div class="input-group">
                                        <input type="text" class="form-control"
                                               ng-model="secrets.txt"
                                               ng-keyup="scretssearch($event)"
                                               placeholder="搜索关键字" style="height: 34px;">
                                            <span class="input-group-btn">
                                                <a class="btn" ng-click="scretssearch('search')"></a>
                                            </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive" style="margin-top: 30px">
                        <table class="table-hover table-default"
                               style="table-layout:fixed; width: 100%;border-bottom: none;">
                            <tr>
                                <div class="row">
                                    <th class='col-lg-2 col-md-2 col-sm-1'>密钥名称</th>
                                    <th class='col-lg-2 col-md-2 col-sm-2'>创建时间</th>
                                </div>
                            </tr>
                            <tr ng-repeat="items in secretitems">
                                <td style="border-bottom: 1px solid #CCCCCC;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden;">
                                    <a class="listitem" uib-tooltip="{{items.metadata.name}}" tooltip-placement="top" ui-sref="console.secret_detail({name:items.metadata.name})"
                                       style="color:#4960e6">
                                        {{items.metadata.name}}
                                    </a>
                                </td>
                                <td style="border-bottom: 1px solid #CCCCCC;"><span
                                        uib-tooltip="{{items.metadata.creationTimestamp  | timescon}}">{{items.metadata.creationTimestamp | dateRelative}}</span>
                                </td>
                            </tr>
                            <tr>

                               <td colspan="2" style="text-align: center;background: #fff;border-bottom: 1px solid #CCCCCC;" ng-if="secretitems.length===0"><p class="blank_block">  <span class="blank_tit">{{text3}}</span></p></td>

                             </tr>
                        </table>
                    </div>
                </div>

                <div class="text-center" ng-if="secrets.total > 10" style="margin-top: 30px;">
                    <uib-pagination class="pagination pagination-sm" ng-model="secrets.page" total-items="secrets.total"
                                    items-per-page="secrets.size" boundary-links="false" max-size="12" rotate="true"
                                    previous-text="<"
                                    next-text=">">
                    </uib-pagination>

                </div>
            </uib-tab>
        </uib-tabset>
    </div>

    <style>
        .listitem {color: #4960e6;}
        .listitem:hover{color:#5a6378;}

        .tab-back-zn-default {
            padding:20px 40px 40px;
            background:#fff;
        }

        .tab-back-zn-default  .tab-content{
            border:none;
            padding:0px 30px;
        }
        .tab-back-zn-default .nav-tabs{
            border:none;
            border-bottom:1px solid #c9c9c9;
        }
        .tab-back-zn-default li.active .nav-link, .tab-default li.active .nav-link:focus, .tab-default li.active .nav-link:hover{
            border:none;
            border-bottom:2px solid #4960e6;
            color:#333;
        }
    </style>
</div>